<template>
  <!-- 构建两个大半圆 -->
  <div class="yuan-right"/>
  <div class="yuan-left"/>

  <div style="display: flex;flex-wrap: nowrap;position: absolute;margin-top: -38%;width: 95%">
    <!-- 设置毛玻璃 -->
    <div class="mao"><el-image :src="images[0]" alt="" /><p class="font">编程小白</p></div>
    <div class="mao"><el-image :src="images[1]" alt="" /><p class="font">专业同学</p></div>
    <div class="mao"><el-image :src="images[2]" alt="" /><p class="font">爱好人士</p></div>
  </div>

  <el-image :src="back_1[0]" alt="" style="position: absolute;z-index: -999;margin-top: -35%"/>

  <div style="font-size: 54px;font-weight: bold;margin-left: 30%;">
    总&nbsp;&nbsp;有&nbsp;&nbsp;一&nbsp;&nbsp;款&nbsp;&nbsp;适&nbsp;&nbsp;合&nbsp;&nbsp;你
  </div>
  <el-image :src="back_1[1]" alt="" style="position: absolute;z-index: -999;margin-top: -12%;margin-left: 15%"/>


</template>

<script setup>
import image1 from '@/assets/img/Home/people1.png'
import image2 from '@/assets/img/Home/people2.png'
import image3 from '@/assets/img/Home/people3.png'
import back from '@/assets/img/Home/download 1.png'
import back2 from  '@/assets/img/Home/Beep Beep Curly Line 2.png'

const images = [image1, image2, image3]
const back_1 = [back, back2]
</script>

<style scoped>
.yuan-right{
  background-color: #f2ca7c;
  width: 400px;
  height: 800px;
  border-radius: 0 400px 400px 0;
  line-height: 100px;
  z-index: -99;
}
.yuan-left{
  background-color: #328a5b;
  width: 400px;
  height: 800px;
  border-radius: 400px 0 0 400px;
  line-height: 100px;
  position: absolute;
  margin-left: 70%;
  top: 280%;
  z-index: -99;
}
.mao{
  backdrop-filter: blur(6px);
  filter:  drop-shadow(0px 20px 10px rgba(0, 0, 0, 0.5));
  border: 1px solid black;
  width: 250px;
  height: 300px;
  box-sizing: border-box;
  margin-left: 12%;

}
.font{
  font-size: 20px;
  font-weight: bold;
  color: black;
  margin-left: 30%;

}
</style>
